<template>
    <!-- 短信登录 -->

    <!-- 短信验证码登录 -->
    <div class="smsContainer">
        <h1 class="title">短信登录</h1>
        <el-form-item label="手机号">
            <el-input maxlength="11" class="captcha phone" v-model="phoneNumber"></el-input>
            <span @click="sendSms" class="captcha-svg"
                style="color: #888; line-height: 45px; text-decoration: underline" v-text="msg" user-select:none></span>
        </el-form-item>
        <el-form-item label="验证码">
            <el-input v-model="code"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="sumbit">登录</el-button>
        </el-form-item>
        <el-form-item>
            <div class="sms">
                <!-- 手机icon图标 -->
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iphone"></use>
                </svg>
                <!-- 切换短信登录 -->
                <a href="javascript:;" @click="$emit('changeCommonType')" style="color: #fff; font-size: 16px">切换常规登录</a>
            </div>
        </el-form-item>
    </div>

</template>

<script>
import * as api from "@/api/users";
import { Message } from "element-ui";

export default {
    // props: ['smsLogin']
    props: {
        storageUserInfo: {
            type: Function,
            require: true
        }
    },
    data() {
        return {
            msg: '点击发送验证码',
            flag: true,   //开关
            phoneNumber: "",
            code: "",  //短信验证码
        }
    },


    methods: {
        async sendSms() {
            if (this.flag) {
                //点击之后开关关闭
                this.flag = false
                //调用接口，获取手机验证码
                let res = await api.getSmsCode(this.phoneNumber)
                console.log(res);
                if(res.data.state){
                    // 短信发送成功
                    this.$message({
                        type:"success",
                        message:'短信发送成功'
                    })
                }else{
                    this.$message.error(res.data.msg)
                }
                let delay = 5
                this.msg = `${delay}秒后重新发送`
                this.interval = setInterval(() => {
                    delay--
                    if (delay < 1) {
                        this.msg = '点击发送验证码'
                        clearInterval(this.interval)
                        //开关重新打开
                        this.flag = true
                    } else {
                        this.msg = `${delay}秒后重新发送`
                    }
                }, 1000)
            }
        },
        async sumbit() {
            let res = await api.smsLogin(this.code)
            console.log(res);
            //调用父组件的方法，用来储存用户信息
            this.storageUserInfo(res.data)
            // 跳转页面
            this.$router.push("/")

        }
    }
}

</script>

<style lang="less" scoped>
.title {
    width: 100%;
    /* font-size: 30px; */
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
    margin: 0 0 60px 40px;

}


.sms {
    margin-left: -15px !important;
    width: 250px !important;
}

.smsContainer {
    padding-right: 20px !important;
    width: 89%;
}

.captcha {
    border: 0;
    width: 125px;
    height: 45px;
    font-size: 18px;
    line-height: 40px;

    /deep/.el-input__inner {
        border-radius: 0;
        border-right: none;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border: 0;
        height: 40px;
    }


}

.captcha-svg {
    display: inline-block;
    width: 125px;
    height: 40px;
    color: rgb(204, 201, 201);
    text-align: center;
    background-color: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    vertical-align: middle;
    cursor: pointer;
    line-height: 40px;
    margin-bottom: 5.2px;
    font-weight: bolder;
    text-decoration: underline;
    // 双击验证码不会被选中 
    user-select: none;
}
.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 20px;
}
</style>